<%--
  Created by IntelliJ IDEA.
  User: 86139
  Date: 2023/9/8
  Time: 13:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>--%>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/js/Core_values.js"></script>

    <style>
        .el-pagination {
            text-align: right;
            margin-top: 20px;
        }

        .el-input {
            width: 250px;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .demonstration {
            display: block;
            color: #8492a6;
            font-size: 14px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<script src="../static/js/flower.js"></script>

<div id="app" style="height: 100%">
    <div class="demo-input-size">
        <el-input v-model="userRealName" placeholder="姓名">
        </el-input>
        <el-input v-model="userTel" placeholder="电话">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="selectLikeUser">搜索</el-button>
        <el-button type="primary" style="float: right;margin-right: 50px" @click="dialogFormVisible1=true">新增员工</el-button>
    </div>
    <el-table
            :data="tableData"
            border
            style="width: 100%"
    >
        <el-table-column
                prop="userName"
                label="账号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="userRealName"
                label="姓名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="deptName"
                label="部门"
                width="120">
        </el-table-column>
        <el-table-column
                prop="roleName"
                label="角色"
                width="150">
        </el-table-column>
        <el-table-column
                prop="userTel"
                label="电话"
                width="220">
        </el-table-column>
        <el-table-column
                prop="userEmail"
                label="邮箱"
                width="220">
        </el-table-column>
        <el-table-column
                label="操作"
                width="190">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="deleteUser(scope.row.userId)">删除</el-button>
                <el-button type="info" size="small" @click="showMessageUser(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--    分页--%>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[2,5,8,10]"
                :page-size="page.currentSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <div>
        <!-- 模态框，用作修改数据时做数据回显用 -->
        <%--        dialogFormVisible  :是否显示模态框       --%>
        <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="员工编号" :label-width="formLabelWidth">
                    <el-input v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.userRealName" autocomplete="off" @blur="ifNull(form.userRealName)"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-select v-model="form.deptName" @change="handleUpdateDeptValueChange">
                        <el-option label="总裁部" value="总裁部"></el-option>
                        <el-option label="人事部" value="人事部"></el-option>
                        <el-option label="研发部" value="研发部"></el-option>
                        <el-option label="测试部" value="测试部"></el-option>
                        <el-option label="调研部" value="调研部"></el-option>
                    </el-select>
                </el-form-item>
                </el-dropdown>
                <el-form-item label="用户权限" :label-width="formLabelWidth">
                    <el-select v-model="form.roleName" @change="handleUpdateDeptRoleChange">
                        <el-option label="总裁" value="admin"></el-option>
                        <el-option label="经理" value="manager"></el-option>
                        <el-option label="普通员工" value="common"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.userTel" autocomplete="off" @blur="ifNullUserTel(form.userTel)"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth" >
                    <el-input v-model="form.userEmail" autocomplete="off" @blur="ifNullUserEmail(form.userEmail)"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUser" v-bind:disabled="disabledValue">确 定</el-button>
            </div>
        </el-dialog>
    </div>


    <div>    <!-- 模态框，用户添加 -->

        <%--        dialogFormVisible1  :是否显示模态框       --%>
        <el-dialog title="新增用户" :visible.sync="dialogFormVisible1">
            <el-form :model="form1">
                <el-form-item label="员工编号" :label-width="formLabelWidth" >
                    <el-input v-model="form1.userName" autocomplete="off" @blur="duplicateUserName(form1.userName)"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth" >
                    <el-input v-model="form1.userRealName" autocomplete="off" @blur="ifNull(form1.userRealName)"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-select v-model="form1.deptName" @change="handleUpdateDeptValueChange">
                        <el-option label="总裁部" value="总裁部"></el-option>
                        <el-option label="人事部" value="人事部"></el-option>
                        <el-option label="研发部" value="研发部"></el-option>
                        <el-option label="测试部" value="测试部"></el-option>
                        <el-option label="调研部" value="调研部"></el-option>
                    </el-select>
                </el-form-item>
                </el-dropdown>
                <el-form-item label="用户权限" :label-width="formLabelWidth">
                    <el-select v-model="form1.roleName" @change="handleUpdateDeptRoleChange">
                        <el-option label="总裁" value="admin"></el-option>
                        <el-option label="经理" value="manager"></el-option>
                        <el-option label="普通员工" value="common"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form1.userPwd" autocomplete="off" @blur="ifNullUserPwd(form1.userPwd)"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertUser" v-bind:disabled="disabledValue1">确 定</el-button>
            </div>
        </el-dialog>
    </div>


</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            userRealName: "",
            userTel: "",
            page: {
                currentPage: 1,
                currentSize: 5,
            },
            total: 10,
            dialogFormVisible: false,
            dialogFormVisible1:false,
            formLabelWidth: "120px",
            form: {
                userId: "",
                userRealName: "",
                deptName: "",
                roleName: "",
                userTel: "",
                userEmail: "",
                userName: ""
            },
            form1: {
                userId: "",
                userRealName: "",
                deptName: "",
                roleName: "",
                userPwd: "",
                userEmail: "",
                userName: ""
            },
            disabledValue:true,    //默认关闭提交按钮
            disabledValue1:true
        },
        methods: {
            //查询所有员工信息
            userList() {
                var _this = this
                $.ajax({
                    url: "../user/selectUserAll",
                    type: "get",
                    dataType: "json",
                    data: _this.page,
                    success: function (res) {
                        // console.log(res)
                        _this.tableData = res.object
                        if (res.status!=403){
                            _this.total = res.object[0].total
                        }else {
                            _this.$message.error(res.message)
                        }

                    },
                })
            },
            handleSizeChange(newSize) {                       //修改页面长度触发函数
                this.page.currentSize = newSize
                this.userList()
            },
            handleCurrentChange(newPage) {                      //修改当前页码触发函数
                this.page.currentPage = newPage;
                this.userList()
            },
            deleteUser(userId) {                                   //用户逻辑删除
                var _this = this
                _this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url: "../user/deleteUser/" + userId,
                        type: "put",
                        dataType: "json",
                        success: function (res) {
                            if (res.status == 200) {
                                _this.$message.success(res.message)
                                _this.page.currentPage = 1
                                _this.userList()   //刷新用户列表
                            } else {
                                _this.$message.error(res.message)
                            }
                        },
                    })
                }).catch(() => {
                    _this.$message.error("取消删除！")
                });


            },
            selectLikeUser() {                                           //查询用户
                var _this = this
                $.ajax({
                    url: "../user/selectLickUser",
                    type: "get",
                    data: {
                        userRealName: _this.userRealName,
                        userTel: _this.userTel
                    },
                    dataType: "json",
                    success: function (res) {
                        // console.log(res)
                        _this.$message.success(res.message)
                        _this.tableData = res.object
                        _this.total = res.object[0].total
                    },
                    error: function () {
                        alert("服务器错误！")
                    }
                })
            },
            showMessageUser(data) {                           //用户数据回显
                // console.log(data)
                this.dialogFormVisible = true
                this.form.userRealName = data.userRealName
                this.form.deptName = data.deptName
                this.form.roleName = data.roleName
                this.form.userTel = data.userTel
                this.form.userEmail = data.userEmail
                this.form.userName = data.userName
                this.form.userId = data.userId
            },
            updateUser() {                                   //修改用户数据
                var _this = this
                $.ajax({
                    url: "../user/updateUser",
                    type: "post",
                    data: JSON.stringify(_this.form),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (res) {
                        // console.log(res)
                        if (res.status == 200) {
                            _this.$message.success(res.message)
                            _this.dialogFormVisible = false
                            _this.userList()
                        } else {
                            _this.$message.error(res.message)
                        }

                    }
                })
            },
            handleUpdateDeptValueChange(value){      //用户部门修改
                this.form.deptName=value
                this.disabledValue=false
            },
            handleUpdateDeptRoleChange(value){    //用户角色修改
                this.form.rloeName=value
                this.disabledValue=false
            },
            insertUser() {                //添加员工
                var _this=this
                // console.log(_this.form1)
                if (_this.form1.userPwd === ""){
                    _this.$message.error("密码不能为空")
                    return
                }else if (_this.form1.userRealName ===""){
                    _this.$message.error("姓名不能为空")
                    return
                }else if (_this.form1.roleName ===""){
                    _this.$message.error("权限不能为空")
                    return
                }else if (_this.form1.deptName ===""){
                    _this.$message.error("部门不能为空")
                    return
                }

                $.ajax({
                    url:"../user/insertUser",
                    type:"post",
                    data:JSON.stringify(_this.form1),
                    dataType:"json",
                    contentType:"application/json",
                    success:function (res) {
                        if (res.status==200){
                            _this.dialogFormVisible1=false
                            _this.$message.success(res.message)
                            _this.userList()
                        }
                    }

                })
            },
            ifNull(userRealName){                                           //形式化验证，不能为空
                console.log(userRealName)
                var _this = this
                if (userRealName === ""){
                    _this.disabledValue=true
                    _this.$message.error("姓名不能为空")
                }else {
                    _this.disabledValue=false
                }
            },
            ifNullUserTel(userTel){
                var _this = this
                if (userTel === ""){
                    _this.disabledValue=true
                    _this.$message.error("电话号码不能为空")
                }else if (userTel.length != 11){
                    _this.disabledValue=true
                    _this.$message.error("电话号码不是11位")
                }else {
                    _this.disabledValue=false
                }
            },
            ifNullUserEmail(userEmail){
                var _this = this
                if (userEmail == ""){
                    _this.disabledValue=true
                    _this.$message.error("邮箱不能为空")
                }else {
                    _this.disabledValue=false
                }

            },
            ifNullUserPwd(userPwd){
                var _this = this
                if (userPwd === ""){
                    _this.disabledValue1=true
                    _this.$message.error("密码不能为空")
                }else {
                    if (_this.form1.userRealName ==="" || _this.form1.roleName ==="" || _this.form1.deptName ===""){
                        _this.disabledValue1=true
                        _this.$message.error("字段不能为空")
                    }
                    _this.disabledValue1=false
                    _this.duplicateUserName(_this.form1.userName)
                }
            },
            duplicateUserName(newUserName){                                     //员工账号不能重复
                var _this=this
                $.ajax({
                    url:"../user/duplicateUserName/"+newUserName,
                    type:"get",
                    dataType:"json",
                    success:function (res) {
                        if (res.status==500){
                            _this.$message.error(res.message)
                            _this.disabledValue1=true
                        }
                    }
                })
            },
        },
        mounted() {
            this.userList()
        }
    })
</script>
</html>

